<template>
  <div class="lj-form">
    <el-form label-width="60px" label-position="left">
      <el-form-item :label="smallWire">
        <div class="form-item">
          <el-select v-model="smallWireModel" placeholder="请选择型号" class="w-[200px]">
            <el-option v-for="item in smallWireOptions" :key="item.label" :label="item.label" :value="item" />
          </el-select>
          <span class="item-txt" v-if="smallWireModel">{{ smallWireModel.value.wireWeight }}kg/m</span>
        </div>
      </el-form-item>

      <el-form-item :label="bigWire">
        <div class="form-item">
          <el-select v-model="bigWireModel" placeholder="请选择型号" class="w-[200px]">
            <el-option v-for="item in bigWireOptions" :key="item.label" :label="item.label" :value="item" />
          </el-select>
          <span class="item-txt" v-if="bigWireModel">{{ bigWireModel.value.wireWeight }}kg/m</span>
        </div>
      </el-form-item>
    </el-form>

    <!-- footer -->
    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script setup lang="ts">
import useCalculatePower from '@/composables/useCalculatePower'
import useWire from '@/composables/useWire'
import { ref } from 'vue'

const { smallWire, bigWire } = defineProps({
  smallWire: { type: String, default: '小引绳' },
  bigWire: { type: String, default: '大引绳' },
  footerTitle: { type: String, default: '小张力机和小牵引机主要是配合置换引绳的作用。' },
})

const { findallNoPage, wires } = useWire()
const { calcPower } = useCalculatePower()

const smallWireOptions = ref<{ label: string; value: WireModel }[]>([])
const bigWireOptions = ref<{ label: string; value: WireModel }[]>([])
const smallWireModel = ref<{ label: string; value: WireModel }>()
const bigWireModel = ref<{ label: string; value: WireModel }>()
const moZuXiShu = ref(1.015)
const num = ref(2)

async function initOptions() {
  await findallNoPage()

  smallWireOptions.value = wires
    .value!.filter((item) => item.wireName.includes('引绳'))
    .map((item) => ({ label: item.wireStyle, value: item }))

  if (bigWire.includes('导线')) {
    bigWireOptions.value = wires
      .value!.filter((item) => item.wireName.includes('导线'))
      .map((item) => ({ label: item.wireStyle, value: item }))
  } else {
    bigWireOptions.value = wires
      .value!.filter((item) => item.wireName.includes('引绳'))
      .map((item) => ({ label: item.wireStyle, value: item }))
  }
}

async function calConfg(str: string, zondId: number) {
  const isSmallQianZhang = str === 'smallCard'
  console.log('计算结果' + str)
  console.log(smallWireModel.value)

  await calcPower(
    {
      qianWireId: smallWireModel.value!.value.id!,
      daoWireId: bigWireModel.value!.value.id!,
      e: moZuXiShu.value,
      n: num.value,
      order: true,
      isCalc: false,
      isSmallQianZhang,
    },
    zondId,
  )
}

initOptions()

defineExpose({ calConfg })
</script>

<style scoped lang="scss">
.lj-form {
  .form-item {
    @apply w-full flex justify-between items-center;
    .item-txt {
      @apply text-[#808080] text-xs;
    }
  }
  .footer {
    @apply text-xs text-[#CCCCCC] py-2 border-t border-[#CCCCCC];
    .text-pointer {
      @apply text-[#D43030];
    }
    .txt-update {
      @apply text-[#D43030] cursor-pointer border-b border-[#D43030];
    }
  }
}
</style>
